<template>
	<view class="content">
		<!-- 堂食 -->
		<view class="codeBox" v-if="data.is_eat==1 && data.status==1&&data.pay_status==2">
			<text class="codeLabel">取餐码</text>
			<text class="codeNum">{{data.take_num}}</text>
		</view>
		<!-- 配送 -->
		<view class="deliveryBox" v-else>
			<view class="deliveryLabel" v-if="data.status==1&&data.pay_status==1">
				待付款
			</view>
			<view class="deliveryLabel" v-if="data.status==1&&data.pay_status==2">
				配送
			</view>
			<view class="deliveryLabel" v-if="data.status==3">
				已完成
			</view>
			<view class="deliveryLabel" v-if="data.status==4">
				已取消
			</view>
			<view class="deliveryLabel" v-if="data.status==5">
				已取消
			</view>
			<view class="addressInfo" v-if="data.is_eat==2">
				<view class="topBox">
					<image :src="baseUrl+'img/my/address.png'" class="addressIcon"></image>
					<text class="name">{{user.name}}</text>
					<text class="phone">{{user.phone}}</text>
				</view>
				<text class="addressText">{{user.floor_house_num}}</text>
			</view>
			<view class="timeBox" v-if="data.is_eat==2">
				<image :src="baseUrl+'img/juanjiahui/time.png'" class="timeIcon"></image>
				<text class="time">时间：{{data.sub_data}}/{{data.sub_time}}</text>
			</view>
		</view>
		<view class="dinnerBox" v-if="data">
			<text class="dinnerLabel">点餐信息（共{{data.dishes_num}}件）</text>
			<view class="itemBox">
				<!-- 根据 isExpanded 的值决定显示多少条菜品 -->
				<view class="cartItem"
					v-for="(item,index) in isExpanded ? (data.dishes || []) : (data.dishes || []).slice(0, 2)"
					:key="index">
					<image :src="item.cover" class="cartPoster"></image>
					<text class="cartName">{{item.name}}</text>
					<view class="cartPriceBox">
						<text class="sellPrice">￥{{item.price}}</text>
						<text class="linePrice">￥{{item.price}}</text>
					</view>
					<text class="countNum">X{{item.num}}</text>
				</view>
			</view>
			<!-- 展开按钮 -->
			<view class="expandBox" v-if="!isExpanded && data.dishes.length > 2" @click="toggleExpand">
				<text class="expandLabel">
					展开
				</text>
				<text class="expandArrow">
					>
				</text>
			</view>
			<!-- 收起按钮 -->
			<view class="expandBox" v-if="isExpanded" @click="toggleExpand">
				<text class="expandLabel">
					收起
				</text>
				<text class="expandArrow" style="transform: rotate(-90deg);">
					>
				</text>
			</view>
			<view class="orderInfoBox">
				<view class="item">
					<text class="left">点餐数量：</text>
					<text class="right">{{data.dishes_num}}</text>
				</view>
				<view class="item">
					<text class="left">就餐人数：</text>
					<text class="right">{{data.people_num}}人</text>
				</view>
				<view class="item" style="flex-direction: column;">
					<text class="left">备注：</text>
					<text class="note">{{data.remark || ''}}</text>
				</view>
			</view>
			<view class="orderInfoBox" style="border: none;">
				<view class="item" v-if="data.is_eat==2">
					<text class="left">服务费：</text>
					<text class="right">{{data.service_price}}</text>
				</view>
				<view class="item" v-if="data.is_eat==2">
					<text class="left">餐酒费：</text>
					<text class="right">{{data.amount-data.service_price}}</text>
				</view>
				<view class="item">
					<text class="left">实付：</text>
					<text class="right">{{data.amount}}</text>
				</view>
			</view>
		</view>
		<view class="details">
			<text class="detailsLabel">预约明细</text>
			<view class="item">
				<text class="left">预约类型：</text>
				<text class="right">{{orderType[data.is_eat-1]}}</text>
			</view>
			<view class="item">
				<text class="left">点餐时间：</text>
				<text class="right">{{data.created_at}}</text>
			</view>
			<view class="item">
				<text class="left">支付时间：</text>
				<text class="right">{{$timestampToTime(data.pay_time,true)}}</text>
			</view>
		</view>
		<view class="cancel" style="margin-top: 40rpx;margin-bottom: 0rpx;" @click="pay"v-if="data.status==1&&data.pay_status==1">
			立即付款
		</view>
		<view class="cancel" style="margin-top: 40rpx;" @click="cancel" v-if="data.status==1">
			取消预约
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				orderType: ['堂食', '配送'],
				id: '',
				data: '',
				user: '',
				isExpanded: false, // 控制是否展开
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.$request.get(`sub_read/${this.id}`).then(res => {
				this.data = res.data.data;
			})
			this.$request.get('center').then(res => {
				this.user = res.data.data;
			})
		},
		methods: {
			pay(){
				this.$request.post(`unified_order`, {
					id: this.id,
					type: 2,
					pay_status:2
				}).then(res => {
					console.log(res);
					if (res.data.code == 10000) {
						//调用支付
						wx.requestPayment({
							timeStamp: res.data.data.timeStamp.toString(),
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: res.data.data.signType,
							paySign: res.data.data.paySign,
							success: (res) => {
								this.$navto.navto("/pages/juanjiahui_result/juanjiahui_result")
							},
							fail: (res) => {
								this.$toast('支付失败');
							}
						});
					}else{
						this.$toast(res.data.message);
					}
				})
			},
			cancel() {
				uni.showModal({
					title: '提示',
					content: '是否确认取消该预约',
					success: (res) => {
						if (res.confirm) {
							this.$request.get(`user_cancel_sub?id=${this.id}`).then(res => {
								if (res.data.code == 10000) {
									this.$toast('取消成功');
									setTimeout(() => {
										// 返回前设置数据
										getApp().globalData.returnData = {
											id: this.id,
											back: 1
										};
										uni.navigateBack({
											delta: 1
										});
									}, 1000)
								} else {
									this.$toast('取消失败');
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 切换展开/收起状态
			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.cancel {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		background: #121212;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		margin-left: 40rpx;
		margin-bottom: 100rpx;
	}

	.details {
		width: 670rpx;
		margin-top: 25rpx;
		padding: 50rpx 40rpx 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.detailsLabel {
			font-weight: 700;
			font-size: 26rpx;
			color: #121212;
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid #121212;
			margin-bottom: 45rpx;
		}
	}

	.orderInfoBox {
		box-sizing: border-box;
		background-color: #fff;
		margin-top: 50rpx;
		width: 670rpx;
		padding-bottom: 15rpx;
		border-bottom: 1rpx solid #121212;
	}

	.item {
		position: relative;
		// padding-top: 45rpx;
		margin-bottom: 35rpx;
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;

		.note {
			width: 100%;
			margin-top: 20rpx;
		}

		.right {
			font-weight: 500;
			font-size: 26rpx;
			color: #121212;
			display: flex;
			margin-left: auto;
			text-align: right;
			align-items: center;
		}

		.left {
			font-weight: 700;
			font-size: 26rpx;
			color: #121212;
		}
	}

	.item:last-child {
		border: none;
	}

	.expandBox {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 22rpx;
		color: #8E8E8E;
		margin-top: 40rpx;
		padding-bottom: 45rpx;
		border-bottom: 1rpx solid #121212;
		width: 670rpx;

		.expandArrow {
			font-size: 26rpx;
			color: #8E8E8E;
			transform: rotate(90deg);
			margin-left: 20rpx;
		}
	}

	.timeBox {
		display: flex;
		align-items: center;
		// margin-left: 40rpx;
		margin-top: 50rpx;

		.timeIcon {
			width: 32rpx;
			height: 32rpx;
		}

		.time {
			font-weight: 500;
			color: #121212;
			margin-left: 25rpx;
			font-size: 24rpx;
		}
	}

	.addressInfo {
		width: 100%;
		margin-top: 20rpx;
		background-color: #fff;
		overflow: hidden;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		position: relative;
		border-bottom: 1rpx solid #121212;

		.topBox {
			display: flex;
			align-items: center;

			.addressIcon {
				width: 22rpx;
				height: 28rpx;
			}

			.name {
				margin-left: 40rpx;
				color: #121212;
				font-size: 28rpx;
			}

			.phone {
				margin-left: 40rpx;
				color: #121212;
				font-size: 28rpx;
			}
		}

		.addressText {
			margin-top: 30rpx;
			margin-left: 60rpx;
			font-size: 24rpx;
			color: #8E8E8E;
			display: inline-block;
		}

	}

	.itemBox {
		width: 670rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin-top: 25rpx;
		padding-bottom: 45rpx;
		border-top: 1rpx solid #121212;
		border-bottom: 1rpx solid #121212;

		.cartItem {
			position: relative;
			width: 670rpx;
			height: 140rpx;
			margin-top: 40rpx;

			.countNum {
				display: flex;
				align-items: center;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 30rpx;
				width: 60rpx;
				text-align: center;
				font-size: 30rpx;
			}

			.cartPriceBox {
				position: absolute;
				top: 85rpx;
				left: 240rpx;
				display: flex;
				align-items: center;

				.linePrice {
					color: #8e8e8e;
					font-weight: 500;
					font-size: 18rpx;
					margin-left: 20rpx;
					text-decoration: line-through;
				}

				.sellPrice {
					color: #121212;
					font-weight: 700;
					font-size: 22rpx;
				}
			}

			.cartName {
				position: absolute;
				font-weight: 700;
				font-size: 26rpx;
				color: #121212;
				top: 20rpx;
				left: 240rpx;
			}

			.cartPoster {
				width: 200rpx;
				height: 140rpx;
				border-radius: 10rpx;
			}
		}
	}

	.dinnerBox {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin-top: 25rpx;
		padding: 50rpx 40rpx 50rpx 40rpx;

		.dinnerLabel {
			font-weight: 700;
			font-size: 26rpx;
			color: #121212;
			letter-spacing: 5rpx;
		}
	}

	.deliveryBox {
		width: 670rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		// align-items: center;
		padding: 65rpx 40rpx 65rpx 40rpx;

		.deliveryLabel {
			width: 100%;
			font-weight: 700;
			font-size: 38rpx;
			color: #121212;
			padding-bottom: 55rpx;
			border-bottom: 1rpx solid #121212;
			text-align: center;
		}
	}

	.codeBox {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 65rpx;
		padding-bottom: 65rpx;

		.codeNum {
			font-weight: 700;
			font-size: 46rpx;
			color: #121212;
			margin-top: 34rpx;
		}

		.codeLabel {
			font-weight: 500;
			font-size: 26rpx;
			color: #121212;
		}
	}

	.content {
		width: 100%;
		min-height: 100vh;
		background-color: #f0f0f0;
		display: flex;
		flex-direction: column;
	}
</style>